<meta title="编辑用户" width="800px" args="user"/>
<form class="form-horizontal"
      id="userForm"
      method="put"
      s="form,valid,nda,datac" s-data="user" action="/rest/user/{user.id}" s-valid="{notice: validNotice}"
      style="padding-top: 30px;">
    <div class="form-group" s-valid-role="item">
        <label class="col-sm-2 control-label">头像：</label>

        <div class="col-sm-10">
            <div style="position: relative; height: 30px;">
                <button class="btn btn-sm btn-info" style="position: absolute;"><i class="fa fa-upload"></i> 上传头像
                </button>
                <input type="text"
                       s-valid-error="require()"
                       s-valid-label="头像"
                       s-valid-msg="{error: {require:{0:'请先上传头像'}}}"
                       style="opacity:0; position: absolute; width: 100px; left: 0;" id="avatar" name="avatar"/>
                <input type="file" class="form-control" name="file" s-change="uploadAvatar(this)"
                       style="position: absolute; opacity: 0; width: 90px;height: 25px; left: 0;"/>
                <span id="uploadPercent" class="text-success" style="margin-left: 100px;"></span>
            </div>
            <div s="tpl" s-datac-ig="false" s-data="user">
                <img src="{%=this.avatar%}" id="avatarImg" style="max-width: 150px; max-height: 150px;"/>
            </div>

        </div>
    </div>
    <div class="form-group" s-valid-role="item">
        <label class="col-sm-2 control-label">用户名：</label>

        <div class="col-sm-10">
            <input type="text" name="username" class="form-control"
                   s-valid-label="用户名"
                   s-valid-error="require(),len(6,12),remote('/rest/user/checkUsername?username={val}&id={user.id}')">
        </div>
    </div>
    <div class="form-group" s-valid-role="item">
        <label class="col-sm-2 control-label">年龄：</label>

        <div class="col-sm-10">
            <input type="number" name="age" class="form-control"
                   s-valid-label="年龄"
                   s-valid-error="require(),range(0,150)">
        </div>
    </div>
    <div class="form-group" s-valid-role="item">
        <label class="col-sm-2 control-label">性别：</label>

        <div class="col-sm-10">
            <label class="radio-inline"><input checked type="radio" name="gender" value="1"/>男</label>
            <label class="radio-inline"><input type="radio" name="gender" value="0"/>女</label>
        </div>
    </div>
    <div class="form-group" s-valid-role="item">
        <label class="col-sm-2 control-label">手机号：</label>

        <div class="col-sm-10">
            <input type="text" name="phone" class="form-control"
                   s-valid-label="手机号"
                   s-valid-error="require()" />
        </div>
    </div>
    <div class="form-group" s-valid-role="item">
        <label class="col-sm-2 control-label">地址：</label>

        <div class="col-sm-10">
            <select s="select" id="province" name="province_id"
                    style="display: inline-block; width: 150px;"
                    s-build="S.get('rest/regions/0')"
                    s-change="S.S('#city').refresh().done(function(){S.N('#city').change()})"
                    s-valid-error="require()"
                    class="form-control">
                <option value="">选择省份</option>
            </select>
            <select s="select" id="city" name="city_id"
                    style="display: inline-block; width: 150px;"
                    s-datac-ig="true"
                    s-data="user"
                    s-build="S.get('rest/regions/' + (S.N('#province').val() == '' ? -1 : S.N('#province').val()))"
                    s-change="S.S('#district').refresh()"
                    s-valid-error="require()"
                    class="form-control">
                <option value="">选择城市</option>
            </select>
            <select s="select" id="district" name="district_id"
                    style="display: inline-block; width: 150px;"
                    s-datac-ig="true"
                    s-data="user"
                    s-build="S.get('rest/regions/' + (S.N('#city').val() == '' ? -1 : S.N('#city').val()))"
                    s-valid-error="require()"
                    class="form-control">
                <option value="">选择城市</option>
            </select>
            <input style="margin-top: 5px" type="text" name="address" class="form-control" placeholder="地址"
                   s-valid-error="require()">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">状态：</label>

        <div class="col-sm-10">
            <label class="radio-inline"><input checked type="radio" name="status" value="VALID"/>可用</label>
            <label class="radio-inline"><input type="radio" name="status" value="INVALID"/>冻结</label>
        </div>
    </div>
</form>
<script type="text/javascript">

    S.on("s-ready", function(){
        S.N("#province").change();
    })

    S.meta.btns = [
        {
            name: "保存",
            style: "btn btn-primary",
            click: function () {
                return S.S("#userForm").submit().done(function (rs) {
                    S.close(rs);
                    S.notice("修改用户成功", "success");
                });
            }
        },
        {
            name: "关闭",
            style: "btn btn-default",
            click: function () {
                S.close();
            }
        }
    ];

    function validNotice(node, msg, level) {
        if (level == 'error') {
            S.notice(msg, 'danger');
        }
    }

    function uploadAvatar(inputSmart) {
        if (/^.+\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/gi.test(inputSmart.node.val())) {

        }
        S.upload("/rest/upload", inputSmart.node, {
            onProgress: function (p) {
                S.N("#uploadPercent").text("上传中：" + p + "%");
                if (p == 100) {
                    S.N("#uploadPercent").text("上传完成");
                }
            }
        }).done(function (fileUrl) {
            S.N("#avatar").val(fileUrl);
            S.N("#avatarImg").attr("src", fileUrl);
        });
    }
</script>